<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
		  <script src="https://cdn.bootcss.com/echarts/3.7.2/echarts.js"></script>
	</head>
	<body>
		 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 2000px;height:1000px;"  align="right"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
      //--------------------------------------------开始---------------------------------------------------------------------------
          				//var uploadedDataURL = "json/anhui.json";//陕西省地图json
          				var uploadedDataURL = "json/shanxi.json";//陕西省地图json
						
						function city_hlj(){
						    var name = 'hlj';
						    myChart.showLoading();//数据没加载前加个loading状态
						    $.get(uploadedDataURL, function(geoJson) {
						    	
						        myChart.hideLoading();//关闭loading
						         echarts.registerMap(name, geoJson);//注册地图插件
						         
						           var url="${pageContext.request.contextPath }/queryShanXiEveryAreaIncome.action";    
						            var data="";//无参数的写法
						            //var flag="1";
						            //var flag2="16";
						            //var data={"flag":flag,"flag2":flag2}//多参数 用逗号隔开
						            $.post(url,data,function(result){
						                    console.log(result)
						                    myChart.showLoading();
						                    $.getJSON(uploadedDataURL, function(geoJson) {
						                        echarts.registerMap('shanxi', geoJson);
						                        myChart.hideLoading();
						                        var geoCoordMap = {
						                            '省委':[108.953098,34.2778],
						                            '西安市':[108.940746,34.236608],
						                            '榆林市':[109.745926,38.279439],
						                            '延安市':[109.50051,36.60332],
						                            '铜川市':[108.968067,34.908368],
						                            '渭南市':[109.483933,34.502358],
						                            '商洛市':[109.934208,33.873907],
						                            '宝鸡市':[107.170645,34.364081],
						                            '咸阳市':[108.707509,34.345373],
						                            '汉中市':[107.045478,33.081569],
						                            '安康市':[109.038045,32.70437],
						                        };
						                        var moveLine = {
						                        'normal':[
						                        {"fromName":"省委","toName":"西安市",'coords':[[108.953098,34.2778],[108.940746,34.236608],]},
						                        {"fromName":"省委","toName":"榆林市",'coords':[[108.953098,34.2778],[109.745926,38.279439],[108.953098,34.2778]]},
						                        {"fromName":"省委","toName":"延安市",'coords':[[108.953098,34.2778],[109.50051,36.60332],[108.953098,34.2778]]},
						                        {"fromName":"省委","toName":"铜川市",'coords':[[108.953098,34.2778],[108.968067,34.908368],[108.953098,34.2778]]},
						                        {"fromName":"省委","toName":"渭南市",'coords':[[108.953098,34.2778],[109.483933,34.502358],[108.953098,34.2778]]},
						                        {"fromName":"省委","toName":"商洛市",'coords':[[108.953098,34.2778],[109.934208,33.873907],[108.953098,34.2778]]},
						                        {"fromName":"省委","toName":"宝鸡市",'coords':[[108.953098,34.2778],[107.170645,34.364081],[108.953098,34.2778]]},
						                        {"fromName":"省委","toName":"咸阳市",'coords':[[108.953098,34.2778],[108.707509,34.345373],[108.953098,34.2778]]},
						                        {"fromName":"省委","toName":"汉中市",'coords':[[108.953098,34.2778],[107.045478,33.081569],[108.953098,34.2778]]},
						                        {"fromName":"省委","toName":"安康市",'coords':[[108.953098,34.2778],[109.038045,32.70437],[108.953098,34.2778]]},
						                        ],
						                        'warning':[
						                        
						                        ]
						                        };
						                        var data = [
						                            {name:'省委',value:190},
						                            {name:'西安市',value:190},
						                            {name:'榆林市',value:190},
						                            {name:'延安市',value:190},
						                            {name:'铜川市',value:190},
						                            {name:'渭南市',value:90},
						                            {name:'商洛市',value:120},
						                            {name:'宝鸡市',value:120},
						                            {name:'咸阳市',value:120},
						                            {name:'汉中市',value:120},
						                            {name:'安康市',value:190},
						                        ];
						                        var max = 480, min = 9; // todo 
						                        var maxSize4Pin = 100, minSize4Pin = 20;

						                      var convertData = function (data) {
						                        var res = [];
						                        for (var i = 0; i < data.length; i++) {
						                            var geoCoord = geoCoordMap[data[i].name];
						                            if (geoCoord) {
						                                res.push({
						                                    name: data[i].name,
						                                    value: geoCoord.concat(data[i].value)
						                                });
						                            }
						                        }
						                        return res;
						                    };


						                        option = {
						                            backgroundColor: '#091c3d',
						                            title: {
						                                top:20,
						                                text: '',
						                                subtext: '',
						                                x: 'center',
						                                textStyle: {
						                                    color: '#ccc'
						                                }
						                            },    

						                            tooltip: {
						                                trigger: 'item',
						                                formatter: function (params) {
						                                  if(typeof(params.value)[2] == "undefined"){
						                                  	return params.name + ' : ' + params.value;
						                                  }else{
						                                  	return params.name + ' : ' + params.value[2];
						                                  }
						                                }
						                            },
						                            legend: {
						                            orient: 'vertical',
						                            y: 'bottom',
						                            x:'right',
						                            data:['pm2.5'],
						                            textStyle: {
						                                color: '#fff'
						                            }
						                            }, 
						                            visualMap: {
						                                show: false,
						                                min: 0,
						                                max: 500,
						                                left: 'left',
						                                top: 'bottom',
						                                text: ['高', '低'], // 文本，默认为数值文本
						                                calculable: true,
						                                seriesIndex: [1],
						                                inRange: {
						                                    // color: ['#3B5077', '#031525'] // 蓝黑
						                                    // color: ['#ffc0cb', '#800080'] // 红紫
						                                    // color: ['#3C3B3F', '#605C3C'] // 黑绿
						                                    //color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
						                                     //color: ['#23074d', '#cc5333'] // 紫红
						                                    // color: ['#00467F', '#A5CC82'] // 蓝绿
						                                    // color: ['#1488CC', '#2B32B2'] // 浅蓝
						                                    // color: ['#00467F', '#A5CC82'] // 蓝绿
						                                    // color: ['#00467F', '#A5CC82'] // 蓝绿
						                                    // color: ['#00467F', '#A5CC82'] // 蓝绿
						                                    // color: ['#00467F', '#A5CC82'] // 蓝绿

						                                }
						                            },
						                            // toolbox: {
						                            //     show: true,
						                            //     orient: 'vertical',
						                            //     left: 'right',
						                            //     top: 'center',
						                            //     feature: {
						                            //             dataView: {readOnly: false},
						                            //             restore: {},
						                            //             saveAsImage: {}
						                            //             }
						                            // },
						                            geo: {
						                                show: true,
						                                map: 'shanxi',
						                                label: {
						                                    normal: {
						                                        show: false
						                                    },
						                                    emphasis: {
						                                        show: false,
						                                    }
						                                },
						                                roam: true,
						                                itemStyle: {
						                                    normal: {
						                                        areaColor: 'transparent',
						                                        borderColor: '#3fdaff',
						                                        borderWidth: 2,
						                                        shadowColor: 'rgba(63, 218, 255, 0.5)',
						                                        shadowBlur: 30
						                                    },
						                                    emphasis: {
						                                        areaColor: '#2B91B7',
						                                    }
						                                }
						                            },
						                            series : [
						                          {
						                                name: 'light',
						                                type: 'scatter',
						                                coordinateSystem: 'geo',
						                                data: convertData(data),
						                                symbolSize: function (val) {
						                                    return val[2] / 10;
						                                },
						                                label: {
						                                    normal: {
						                                        formatter: '{b}',
						                                        position: 'right',
						                                        show: true
						                                    },
						                                    emphasis: {
						                                        show: true
						                                    }
						                                },
						                                itemStyle: {
						                                    normal: {
						                                        color: '#F4E925'
						                                    }
						                                }
						                            },
						                             {
						                                type: 'map',
						                                map: 'shanxi',
						                                geoIndex: 0,
						                                aspectScale: 0.75, //长宽比
						                                showLegendSymbol: false, // 存在legend时显示
						                                label: {
						                                    normal: {
						                                        show: false
						                                    },
						                                    emphasis: {
						                                        show: false,
						                                        textStyle: {
						                                            color: '#fff'
						                                        }
						                                    }
						                                },
						                                roam: true,
						                                itemStyle: {
						                                    normal: {
						                                        areaColor: '#031525',
						                                        borderColor: '#FFFFFF',
						                                    },
						                                    emphasis: {
						                                        areaColor: '#2B91B7'
						                                    }
						                                },
						                                animation: false,
						                                data: data
						                            },
						                            {
						                                name: 'Top 5',
						                                type: 'effectScatter',
						                                coordinateSystem: 'geo',
						                                data: convertData(data.sort(function (a, b) {
						                                    return b.value - a.value;
						                                }).slice(0, 5)),
						                                symbolSize: function (val) {
						                                    return val[2] / 10;
						                                },
						                                showEffectOn: 'render',
						                                rippleEffect: {
						                                    brushType: 'stroke'
						                                },
						                                hoverAnimation: true,
						                                label: {
						                                    normal: {
						                                        formatter: '{b}',
						                                        position: 'right',
						                                        show: true
						                                    }
						                                },
						                                itemStyle: {
						                                    normal: {
						                                        color: '#F4E925',
						                                        shadowBlur: 10,
						                                        shadowColor: '#05C3F9'
						                                    }
						                                },
						                                zlevel: 1
						                            },
						                             {
						                            name: '线路',
						                            type: 'lines',
						                            coordinateSystem: 'geo',
						                            zlevel: 2,
						                            large: true,
						                            effect: {
						                                show: true,
						                                constantSpeed: 30,
						                                symbol: 'arrow',//ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
						                                symbolSize: 0,
						                                trailLength: 0,
						                            },
						                            
						                            lineStyle: {
						                                normal: {
						                                    color:'#0fff17',
						                                    /*
						                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						                                            offset: 0, color: '#58B3CC'
						                                        }, {
						                                            offset: 1, color: '#F58158'
						                                        }], false),*/
						                                    width: 2,
						                                    opacity: 1.0,
						                                    curveness: 0.15
						                                }
						                            },
						                            data: moveLine.normal
						                        },
						                        {
						                            name: '线路',
						                            type: 'lines',
						                            coordinateSystem: 'geo',
						                            zlevel: 2,
						                            large: true,
						                            effect: {
						                                show: true,
						                                constantSpeed: 30,
						                                symbol: 'arrow',//ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
						                                symbolSize: 10,
						                                trailLength: 0,
						                            },
						                            
						                            lineStyle: {
						                                normal: {
						                                    color:'rgb(255, 0, 0)',
						                                    width: 2,
						                                    opacity: 1,
						                                    curveness: 0.15
						                                }
						                            },
						                            data: moveLine.warning
						                        }
						                             
						                        ]
						                        };
						                        myChart.setOption(option);
						                    });
						                    
						                    
						                
						            },"json");
						      
						         
						         
						         
						    });
						};
						city_hlj();
          
                //--------------------------------------------结束---------------------------------------------------------------------------

        // 使用刚指定的配置项和数据显示图表。
       // myChart.setOption(option);
    </script>
		

</body>
</html>